<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
    <title>任务清单</title>
    <style>
        .myDiv {
            /* display: flex; */
            width: 600px;
            position: relative;
            margin-left: 50%;
            left: -300px;
            display: flex;
            justify-content: space-around;
            top: 30px
        }
        
        .mydiv>input {
            padding-left: 20px;
            width: 500px;
            height: 32px;
            border: #E6E8EB 1px solid;
            border-radius: 4px;
        }
        
        input:focus {
            border: 1px #59a4ff solid;
            outline: none;
        }
        
        .table {
            margin-top: 40px;
            width: 100%;
        }
        
        table {
            width: 1200px;
            border: #F5F7FA 1px solid;
            position: relative;
            margin-left: 50%;
            left: -600px;
        }
        
        tr:nth-child(even) {
            background-color: #F5F7FA;
        }
        
        tr {
            text-align: center;
            height: 35px;
            font-size: small;
            color: #303133;
            /* margin-top: 10px; */
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <template id="root">
        <div class="myDiv">
            <input type="text" placeholder="添加你的任务" v-model="input">
            <el-button @click="addPlan()" type="primary">添加</el-button></el-button>
        </div>
        <div class="table">
            <my-table></my-table>
        </div>
    </template>


    <template id="table">
        <table>
            <tr>
                <td colspan="1" style="text-align: left;">
                    <el-button @click="deleteAll()" :disabled="list.length === 0">全部删除</el-button>
                </td>
                <td colspan="4">
                    <el-alert style="width: 100%;" v-show="list.length == 10" title="最多添加10个计划" type="error" />
                </td>
            </tr>
            <tr style="font-weight: 550;">
                <td style="width: 10%;">序号</td>
                <td style="width: 50%;">计划</td>
                <td style="width: 10%;">状态</td>
                <td style="width: 15%;">操作</td>
                <td style="width: 15%;">删除</td>
            </tr>
            <tr v-for="(item,index) in list" :key="index">
                <td>{{ index+ 1 }}</td>
                <td>{{ item.name }}</td>
                <td
                >{{ item.status === false ? '未完成' : '完成' }}</td>
                <td>
                    <el-button type="primary" size="small" plain @click="finish(index)" :disabled="item.status">点击完成</el-button>
                </td>
                <td>
                    <el-button type="danger" size="small" plain @click="detele()">删除</el-button>
                </td>
            </tr>
            <tr v-show="list.length == 0">
                <td colspan="5">没有计划 </td>
            </tr>
        </table>
    </template>

    <script>
        const emitter = window.mitt()
        const {
            ref,
            onMounted,
        } = Vue
        const app = Vue.createApp({
            template: "#root",
            setup() {
                const input = ref('') //计划
                    //添加计划
                const addPlan = () => {
                    if (input.value != '') {
                        // 发送计划
                        emitter.emit('addList', input.value)
                    } else {
                        alert('计划不能为空')
                    }
                    input.value = '' //清空
                }
                return {
                    input,
                    addPlan
                }
            }
        })
        app.component('my-table', {
            template: '#table',
            setup() {
                const value = ref(false)
                const list = ref([]) 
                  
                const finish = (index) => {
                    list.value[index].status = true
                    let finishArray = [] 
                    let unfinishArray = [] 
                    list.value.forEach(el => {
                        console.log(el, 'el')
                        if (el.status == true) {
                            finishArray.push(el)
                        } else {
                            unfinishArray.push(el)
                        }
                    });
                    list.value = [...finishArray, ...unfinishArray]
                }

                const detele = (index) => {
                        list.value.splice(index, 1)
                    }
                const deleteAll = () => {
                        list.value = []
                    }
                onMounted(() => {
                    emitter.on('addList', res => {
                        let arrItem = {}
                        arrItem.name = res
                        arrItem.status = false
                        if (list.value.length < 10) {
                            list.value.push(arrItem)
                        }
                    })
                })

                return {
                    list,
                    value,
                    finish,
                    detele,
                    deleteAll
                }
            }
        })

        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>

</html>
